<template>
    <div class="home">
        <div class="header">
            <div class="logo"></div>
            <div class="titleMain">
                <h1>CAL1630连退跑偏分析预测模型</h1>
            </div>
        </div>
        <div class="home-main">
            <el-row class="top h-90%">
                <el-col :span="6">
                    <span class="warn">
                        <p style="position:absolute;width:180px;top:35%;left:7%;font-size:16px">跑偏模型后卷过度异常</p>
                        <img :src="imagePath(1)" style="width:350px" />
                    </span>

                </el-col>
                <el-col :span="6">
                    <span class="warn">
                        <p style="position:absolute;width:180px;top:35%;left:32%;font-size:16px">炉温控制后卷过度异常</p>
                        <img :src="imagePath(2)" style="width:350px" />
                    </span>
                </el-col>
                <el-col :span="6">
                    <span class="warn">
                        <p style="position:absolute;width:180px;top:35%;left:57%;font-size:16px">炉辊打滑后卷过度异常</p>
                        <img :src="imagePath(3)" style="width:350px" />
                    </span>

                </el-col>
                <el-col :span="6">
                    <span class="warn">
                        <p style="position:absolute;width:180px;top:35%;left:82%;font-size:16px">平整AI模型正常</p>
                        <img :src="imagePath(4)" style="width:350px" />
                    </span>
                </el-col>

            </el-row>
            <el-row>
                <!-- <el-col class="top-middle" :span="7">
                  <div class="msg-title">跑偏模型报警:</div>
                  <div class="information">
                      <el-carousel height="100%" autoplay class="h-100% w-100%" direction="vertical" :interval="8000">
                      <span>&nbsp; 后卷过度异常，模型进行了**调整</span>
                      <el-icon style="color: red !important"><SuccessFilled /></el-icon>
                      </el-carousel>
                  </div>
  
  
              </el-col>
              <el-col class="top-middle" :span="7">
                  <div class="msg-title">炉温控制模型报警:</div>
                  <div class="information">
                      <el-carousel height="100%" autoplay class="h-100% w-100%" direction="vertical" :interval="8000">
                      <span>&nbsp; 后卷过度异常，模型进行了**调整</span>
                      <el-icon style="color: red !important"><SuccessFilled /></el-icon>
                      </el-carousel>
                  </div>
  
  
              </el-col>  
              <el-col class="top-middle" :span="7">
                  <div class="msg-title">炉温打滑模型报警:</div>
                  <div class="information">
                      <el-carousel height="100%" autoplay class="h-100% w-100%" direction="vertical" :interval="8000">
                      <span>&nbsp; 后卷过度异常，模型进行了**调整的点点滴滴的点点滴顶顶顶顶滴</span>
                      <el-icon style="color: red !important"><SuccessFilled /></el-icon>
                      </el-carousel>
                  </div>
  
  
              </el-col>             -->
            </el-row>
            <el-row class="middle">

                <div class="svg">
                    <svg-load :name="deviationTempModel" style="z-index:999"></svg-load>
                </div>
                <div class="export_looper semitransp_box">
                    <p style="width:70px">入口活套 {{ numberFormat1(inletLooper / 100) }} %</p>
                </div>
                <div class="export_looper_time semitransp_box">
                    <!-- <p>冲套时间</p> -->
                    <p style="width:70px">{{ inletLooperTime }}</p>
                </div>
                <div class="cpc4_width cpc4_semitransp_box" :class="cpc4WidthAlarm ? 'is_alarm' : ''">
                    <p>CPC4测宽值</p>
                    <p>{{ numberFormat1(cpc4Width) }}mm</p>
                </div>
                <div class="middle_looper semitransp_box">
                    <p style="width:60px">中间活套 {{ numberFormat1(middleLooper / 100) }} %</p>
                </div>
                <!-- <div class="entZincPot semitransp_box">
                <p style="color:#FF0000;">入锅温度</p>
                <p style="color:#FF0000;">{{ numberFormat1(entZincPot) }} ℃</p>
              </div>
              <div class="zincPotGa semitransp_box">
                <p style="color: #FFD700">GA锅</p>
                <p style="color: #FFD700">{{ numberFormat1(zincPotGa) }} ℃</p>
              </div>
              <div class="zincPotGi semitransp_box">
                <p style="color: #7FFF00">GI锅</p>
                <p style="color: #7FFF00">{{ numberFormat1(zincPotGi) }} ℃</p>
              </div> -->

                <!-- <div class="AlFeBox">
                  <div>
                  <span>{{giALFeData.time}}</span>
                  </div>
                  <div>
                  <span>铁：</span>
                  <span style="color: #FFD700">{{giALFeData.Fe}}</span>
                  </div>
                  <div>
                  <span>铝：</span>
                  <span style="color: #7FFF00">{{giALFeData.Al}}</span>
                  </div>
              </div> -->
                <div class="middle_looper_time semitransp_box">
                    <!-- <p>跑空时间</p> -->
                    <p style="width:60px">{{ middleLooperTime }}</p>
                </div>
                <div class="inlet_looper semitransp_box">
                    <p style="width:60px">出口活套 {{ numberFormat1(exportLooper / 100) }} %</p>
                </div>
                <div class="inlet_looper_time semitransp_box">
                    <!-- <p>冲套时间</p> -->
                    <p style="width:60px">{{ exportLooperTime }}</p>
                </div>
                <!-- <div class="uncoiler_remaining_length_a semitransp_box">
                  <p>#1开卷机剩余长度</p>
                  <p>{{ numberFormat1(uncoiler_remaining_length_a) }} m</p>
              </div>
              <div class="uncoiler_remaining_length_b semitransp_box">
                  <p>#2开卷机剩余长度</p>
                  <p>{{ numberFormat1(uncoiler_remaining_length_b) }} m</p>
              </div> -->
                <!-- <div class="coiler_remaining_length_b semitransp_box">
                  <p>卷取长度</p>
                  <p>{{ numberFormat1(coiler_remaining_length_b) }} m</p>
              </div> -->
                <!-- <div class="yield-strength semitransp_box" style="position:absolute;left: 65.1vw;top: 6vh;padding: 0 .5rem;display:flex">
                <p style="padding-top:2px">屈服强度：</p>
                <p style="padding-top:2px">{{ numberFormat1(yieldStrength) }} </p>
              </div>
  
              <div class="yield-strength semitransp_box" style="position:absolute;left: 65.1vw;top: 9vh;padding: 0 .5rem;display:flex">
                  <p style="padding-top:2px">抗拉强度：</p>
                  <p style="padding-top:2px">{{ numberFormat1(yieldPull) }} </p>
              </div> -->

                <!-- <div class="semitransp_box"  style="position:absolute;left: 79vw;top: 17vh;padding: 0 .5rem;display:flex">
                  <p>上涂油：</p>
                  <p>{{ oilTop * 1 }} </p>
               </div>
              <div class="semitransp_box" style="position:absolute;left:79vw;top: 25vh;padding: 0 .5rem;display:flex">
                  <p>下涂油：</p>
                  <p>{{ oilBot * 1 }} </p>
              </div> -->

                <div class="uncoiler_remaining_length_a semitransp_box">
                    <p>#1卷取长度</p>
                    <p>{{ numberFormat(uncoiler_remaining_length_a, 0) }} m</p>
                </div>
                <div class="uncoiler_remaining_length_b semitransp_box">
                    <p>#2卷取长度</p>
                    <p>{{ numberFormat(uncoiler_remaining_length_b, 0) }} m</p>
                </div>
                <div class="coiler_remaining_length_a semitransp_box">
                    <p>#1开卷机剩余长度</p>
                    <p>{{ numberFormat(coiler_remaining_length_a, 0) }} m</p>
                </div>
                <div class="coiler_remaining_length_b semitransp_box">
                    <p>#2开卷机剩余长度</p>
                    <p>{{ numberFormat(coiler_remaining_length_b, 0) }} m</p>
                </div>

                <div id="middle_speed1" style="margin-left:5%;"></div>
                <div id="middle_speed2" style="margin-left:20%;"></div>
                <!-- <div id="middle_speed3" style="margin-left:168px;"></div> -->
                <div id="middle_speed4" style="margin-left:48px;"></div>


            </el-row>
            <!-- 替换 foot-lineChart 区域为两个图表，左1右2 -->
            <el-row class="foot-lineChart">
                <el-col :span="8">
                    <div id="furnaceTensionChart" class="chart-box"></div>
                </el-col>
                <el-col :span="16">
                    <div id="deviationAlarmChart" class="chart-box"></div>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <new-coil-card title="实时钢卷信息">
                        <el-table :data="footTable" 
                            :header-cell-style="{ background: '#2f59af', color: '#fff', fontSize: '15px', border: 'none' }"
                            :cell-style="getCellStyle"
                            @row-click="handleCoilRowClick">
                            <el-table-column type="index" label="序号"/>
                            <el-table-column prop="entId" label="卷号"/>
                            <el-table-column prop="steelGrade" label="钢种"/>
                            <el-table-column prop="width" label="宽度"/>
                            <el-table-column prop="thickness" label="厚度"/>
                            <el-table-column prop="paoPianRate" label="预测跑偏概率(%)" :formatter="(row: any) => percentFormat(row.paoPianRate)"/>
                            <el-table-column prop="c40Passrate" label="凸度命中率(%)" :formatter="(row: any) => percentFormat(row.c40Passrate)"/>
                            <el-table-column prop="w40Passrate" label="楔形命中率(%)" :formatter="(row: any) => percentFormat(row.w40Passrate)"/>
                            <el-table-column prop="ascDesc" label="板形状况"/>
                            <el-table-column prop="ascHeadJifen" label="头部板形"/>
                            <el-table-column prop="ascMidJifen" label="中部板形"/>
                            <el-table-column prop="ascTailJifen" label="尾部板形"/>
                            <el-table-column prop="gradePaoPianRate" label="品规跑偏概率(%)" :formatter="(row: any) => percentFormat(row.gradePaoPianRate)"/>
                        </el-table>



                    </new-coil-card>

                </el-col>


            </el-row>

        </div>

    </div>

    <!-- 新增弹窗 -->
    <!-- 替换 el-dialog 部分为自定义弹窗 -->
    <div v-if="showShapeDialog" class="custom-dialog-overlay" @click.self="showShapeDialog = false">
      <div class="custom-dialog-content">
        <div class="custom-dialog-header">
          <span>板形仪通道号(长度序列){{ selectedCoilId }}</span>
          <span class="custom-dialog-close" @click="showShapeDialog = false">×</span>
        </div>
        <div class="custom-dialog-body">
          <div id="shape-curve-echart" class="custom-echart-bg"></div>
        </div>
      </div>
    </div>


</template>
<script setup lang='ts'>
import { onMounted, ref, watch, onUnmounted } from 'vue';
import { refreshSVG, initialSVG, refreshGraphical } from '/@/common/refreshSVG';
import NewCoilCard from '/@/components/NewCoilCard/NewCoilCard.vue';
import axios from 'axios';
import * as echarts from 'echarts';
import { useUserStore } from '/@/store/modules/system/user';
import { rollingSimulationApi } from '/@/api/RollingSimulation/index';
import { continuousrefundApi } from '/@/api/continuousrefund/continuousrefund';
import { ElMessage } from 'element-plus';
import { historyApi } from '/@/api/furnaceTempDynamicCtrl/history';

import {
    sleeveDeclineTime,
} from "/@/views/common/FulllineTrack/full.line.track.handle";

const deviationTempModel = 'CAL1630';

enum ColourType {
    ZERO = 0, ONE = 1, TWO = 2, THREE = 3, FOUR = 4,
    FIVE = 5, SEX = 6, SEVEN = 7, EIGHT = 8, NINE = 9,
    INITLINE = -1, INITLGRAPHICAL = -2,
}

const ColourStrategy = {
    [ColourType.ZERO]: () => '#FF6600', [ColourType.ONE]: () => '#FF00FF',
    [ColourType.TWO]: () => '#CC3300', [ColourType.THREE]: () => '#0099FF',
    [ColourType.FOUR]: () => '#F08080', [ColourType.FIVE]: () => '#C0C0C0',
    [ColourType.SEX]: () => 'rgba(255,128,64,255)', [ColourType.SEVEN]: () => '#C71585',
    [ColourType.EIGHT]: () => 'rgba(147,147,0,255)', [ColourType.NINE]: () => 'rgba(255,128,192,255)',
    [ColourType.INITLINE]: () => '#5F6368', [ColourType.INITLGRAPHICAL]: () => '#1E1E1E',
};

function SearchForCoidId(zones: any) {
    const object: { [key: string]: string } = {};
    const coilIds = new Set<string>();
    if (zones) {
        for (const key in zones) {
            const zone = zones[key];
            if (zone.entId) {
                coilIds.add(zone.entId);
                if (!object[zone.entId]) {
                    object[zone.entId] = (ColourStrategy as any)[zone.ti % 10]();
                }
            }
        }
    }
    return {
        coilIds: Array.from(coilIds),
        colors: object,
    };
}

const coilIdColors = ref<any>({});

const getCellStyle = ({ row }: { row: any }) => {
    if (coilIdColors.value.colors && coilIdColors.value.colors[row.entId]) {
        return { color: coilIdColors.value.colors[row.entId], fontSize: '15px' };
    }
    return { fontSize: '10px' };
};

// API Data Store
const apiData = ref<any>({});
const data = ref([
    { menuName: "continuousrefunds", menuTitle: '连退跑偏分析模型主页', menuId: '1' },
    { menuName: "PlanRollDeviationPrediction", menuTitle: '计划卷跑偏预测页面' },
    { menuName: "ActualPerformanceRollDeviation", menuTitle: '生产实绩跑偏页面' },
    { menuName: "AccuracyDiagnosisOfCorrectionEquipment", menuTitle: '纠偏设备精度诊断' },
    { menuName: "DeviationClassificatioStatistics", menuTitle: '跑偏分档统计' },
    { menuName: "AcidRolledStandardCoil", menuTitle: '酸轧板形标准卷' }
]);
let intervalId: any = undefined;

const imagePath = (rowIndex: number) => {
    const name = 'warn.png';
    const normal = 'normal.png';
    if (rowIndex === 4) {
        return `/src/assets/images/${normal}`;
    } else {
        return `/src/assets/images/${name}`;
    }
};

const entSpeed = ref<number>(0);
const spmSpeed = ref<number>(0);
const extSpeed = ref<number>(0);
const lineSpeed = ref<number>(0);
const inletLooper = ref<number>(0);
const middleLooper = ref<number>(0);
const exportLooper = ref<number>(0);
const inletLooperTime = ref<string>("0");
const middleLooperTime = ref<string>("0");
const exportLooperTime = ref<string>("0");
const cpc4Width = ref<number>(0);
const cpc4WidthAlarm = ref<boolean>(false);
const uncoiler_remaining_length_a = ref<number>(0);
const uncoiler_remaining_length_b = ref<number>(0);
const coiler_remaining_length_a = ref<number>(0);
const coiler_remaining_length_b = ref<number>(0);
const trackData = ref({ speed: 0, realTV: 0 });

const technologicalName = 'CAL1630';
let tr: any = ref(null);
let por: any = ref(null);
let ti: any = ref(null);
const cenSpeed = ref<number>()

const numberFormat = (number: any, precision: number = 0) => {
    if (number === undefined || number === null || String(number).trim() === "") {
        const zero = 0;
        return zero.toFixed(precision);
    }
    const num = parseFloat(String(number));
    if (isNaN(num)) {
        const zero = 0;
        return zero.toFixed(precision);
    }
    return num.toFixed(precision);
};

const numberFormat1 = (number: any) => {
    return number == undefined ? 0 : Number(parseFloat(number).toFixed(0))
}

// 百分比格式化函数
const percentFormat = (val: any) => {
  const num = parseFloat(val);
  if (isNaN(num)) return '-';
  // 保留一位小数，去除多余0
  return (Math.round(num * 1000) / 10).toString().replace(/\.0$/, '') + '%';
};

const updateAllData = async () => {
    try {
        // 1. Fetch primary tracking data (the source of truth)
        const zoneTrackResponse = await axios.get('http://10.171.7.100:8090/restapi?name=CAL1630_zonetrk');
        const newZoneTrackData = zoneTrackResponse.data;

        if (!newZoneTrackData || !newZoneTrackData.zoneno) {
            footTable.value = [{
                entId: '-',
                paoPianRate: '-',
                c40Passrate: '-',
                w40Passrate: '-',
                ascDesc: '-',
                ascHeadJifen: '-',
                ascMidJifen: '-',
                ascTailJifen: '-',
                gradePaoPianRate: '-',
                steelGradeAttention: '-',
                gradeCode: '-',
                widthCode: '-',
                thickCode: '-',
                gradePaoPianRateTrue: '-',
                cpc4aPaoPianRate: '-',
                cpc4PaoPianRate: '-',
                cpc5aPaoPianRate: '-',
                cpc5PaoPianRate: '-'
            }]; // 没有数据时给默认假数据，防止表格向右移动
            return;
        }

        // --- Start of SVG and Color Update Logic ---
        const trackingInfo = SearchForCoidId(newZoneTrackData.zoneno);
        coilIdColors.value = trackingInfo; // Use the whole object for coloring

        let zones = newZoneTrackData.zoneno;
        // SVG tracking state variables
        if (tr.value === null || tr.value !== newZoneTrackData.tr) {
            tr.value = newZoneTrackData.tr
            let trKey = `${technologicalName}-ZONE_tr${newZoneTrackData.tr}`
            let trpathKey = trKey + '_path'
            refreshSVG(zones[Object.keys(zones).length - 1].ti % 10, trpathKey)
            refreshGraphical(zones[Object.keys(zones).length - 1].ti % 10, trKey)
            initialSVG(technologicalName, 'tr', newZoneTrackData.tr);
        }
        if (por.value === null || por.value !== newZoneTrackData.por) {
            por.value = newZoneTrackData.por
            if (newZoneTrackData.por === 0) {
                initialSVG(technologicalName, 'por', "1");
                initialSVG(technologicalName, 'por', "2");
            }
        }
        if (ti.value === null || ti.value !== zones[0].ti) {
            ti.value = zones[0].ti
            let porKey = `${technologicalName}-ZONE_por${newZoneTrackData.por}`
            let porpathKey = porKey + '_path'
            refreshSVG(zones[0].ti % 10, porpathKey)
            refreshGraphical(zones[0].ti % 10, porKey)
            initialSVG(technologicalName, 'por', newZoneTrackData.por);
        }
        for (let i in zones) {
            let pathkey = `${technologicalName}-ZONE${i}`;
            refreshSVG(zones[i].ti % 10, pathkey)
        }
        // --- End of SVG and Color Update Logic ---

        // 3. Fetch detailed info for coils on the line
        const uniqueEntIds = trackingInfo.coilIds.filter(id => id);

        if (uniqueEntIds.length > 0) {
            const steelInfoResponse = await continuousrefundApi.getSteelInfo(uniqueEntIds);
            if (steelInfoResponse && steelInfoResponse.data.data) {
                const processedData = steelInfoResponse.data.data.map((item: any) => {
                    const newItem = { ...item };
                    const fieldsToProcess = [
                        'c40Passrate', 'w40Passrate', 'ascHeadJifen', 'ascMidJifen', 'ascTailJifen',
                        'gradePaoPianRate', 'paoPianRate', 'steelGradeAttention', 'gradePaoPianRateTrue',
                        'cpc4aPaoPianRate', 'cpc4PaoPianRate', 'cpc5aPaoPianRate', 'cpc5PaoPianRate'
                    ];
                    fieldsToProcess.forEach(field => {
                        if (newItem[field] === null || newItem[field] === undefined || String(newItem[field]).trim() === '') {
                            newItem[field] = '0.000';
                        } else {
                            const num = parseFloat(newItem[field]);
                            if (!isNaN(num)) {
                                newItem[field] = num.toFixed(3);
                            }
                        }
                    });
                    return newItem;
                });
                footTable.value = processedData;
            } else {
                footTable.value = [{
                    entId: '-',
                    paoPianRate: '-',
                    c40Passrate: '-',
                    w40Passrate: '-',
                    ascDesc: '-',
                    ascHeadJifen: '-',
                    ascMidJifen: '-',
                    ascTailJifen: '-',
                    gradePaoPianRate: '-',
                    steelGradeAttention: '-',
                    gradeCode: '-',
                    widthCode: '-',
                    thickCode: '-',
                    gradePaoPianRateTrue: '-',
                    cpc4aPaoPianRate: '-',
                    cpc4PaoPianRate: '-',
                    cpc5aPaoPianRate: '-',
                    cpc5PaoPianRate: '-'
                }];
            }
        } else {
            footTable.value = [{
                entId: '-',
                paoPianRate: '-',
                c40Passrate: '-',
                w40Passrate: '-',
                ascDesc: '-',
                ascHeadJifen: '-',
                ascMidJifen: '-',
                ascTailJifen: '-',
                gradePaoPianRate: '-',
                steelGradeAttention: '-',
                gradeCode: '-',
                widthCode: '-',
                thickCode: '-',
                gradePaoPianRateTrue: '-',
                cpc4aPaoPianRate: '-',
                cpc4PaoPianRate: '-',
                cpc5aPaoPianRate: '-',
                cpc5PaoPianRate: '-'
            }];
        }

        // 4. Fetch other independent data
        const itemTagResponse = await axios.get('http://10.171.7.100:8090/restapi?name=CAL1630_itemtag');
        if (itemTagResponse.data) {
            apiData.value = itemTagResponse.data;
        }

        const hourResponse = await axios.get('http://10.171.7.100:8090/restapi?name=CAL1630_hour');
        if (hourResponse.data) {
            trackData.value.speed = hourResponse.data.speed;
            trackData.value.realTV = hourResponse.data.hour;
        }

    } catch (error) {
        console.error('Error updating data:', error);
    }
}

const SpeedBaseOption: any = {
    middle_speed1: { max: 500, segmentation1: 80, segmentation2: 300, },
    middle_speed2: { max: 500, segmentation1: 120, segmentation2: 300, },
    middle_speed3: { max: 500, segmentation1: 80, segmentation2: 300, },
    middle_speed4: { max: 300, segmentation1: 80, segmentation2: 180, }
}

onMounted(() => {
    useUserStore().setTagNav(data.value);
    initScoreChart("middle_speed1", entSpeed.value || 0)
    initScoreChart("middle_speed2", spmSpeed.value || 0)
    initScoreChart("middle_speed4", lineSpeed.value || 0)

    updateAllData();
    intervalId = setInterval(() => {
        updateAllData();
    }, 3000); // Poll every 3 seconds

    const furnaceTensionChart = echarts.init(document.getElementById('furnaceTensionChart'));
    furnaceTensionChart.setOption({
        title: {
            text: '炉区张力[kN]',
            left: 10,
            top: 10,
            textStyle: { color: '#fff', fontSize: 14 }
        },
        tooltip: {},
        legend: { show: false },
        grid: { left: 40, right: 20, top: 40, bottom: 30 },
        xAxis: {
            type: 'category',
            data: [
                'PHS张力', 'HS1张力', 'HS2张力', 'SS张力', 'SCS张力', 'RCS张力', 'OA1张力', 'OA2张力', 'OA3张力', 'FCS张力'
            ],
            axisLabel: { color: '#fff', fontSize: 12, show: true }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 20,
            axisLabel: { color: '#fff', fontSize: 12 }
        },
        series: [
            {
                type: 'bar',
                data: [14, 9, 8, 8, 8, 11, 10, 10, 11, 15], // 这里后续用实际数据替换
                barWidth: 18,
                itemStyle: { color: '#4ea6e6' },
                barGap: '0%',
                barCategoryGap: '0%'
            },
            {
                type: 'bar',
                data: [12, 8, 7, 7, 7, 10, 9, 9, 10, 14], // 这里后续用实际数据替换
                barWidth: 18,
                itemStyle: { color: '#ffd84a' },
                barGap: '0%',
                barCategoryGap: '0%'
            }
        ]
    });
    // 纠偏报警信息图
    const deviationAlarmChart = echarts.init(document.getElementById('deviationAlarmChart'));
    const cpcLabels = [
        'cpc1', 'cpc2', 'cpc3', 'cpc4', 'cpc5', 'cpc6', 'cpc7', 'cpc8',
        'cpc9.0', 'cpc9.1', 'cpc9.2', 'cpc9.3', 'cpc9.4', 'cpc9.5', 'cpc9.6', 'cpc9.7', 'cpc9.8',
        'cpc10', 'cpc11', 'cpc12', 'cpc13', 'cpc14', 'cpc15', 'cpc16', 'cpc17'
    ];
    // 静态假数据，液压缸和带钢各26项
    const cpcHydraulic = [10, 12, 8, 15, 7, 9, 11, 13, 6, 8, 10, 12, 7, 9, 11, 13, 8, 10, 12, 8, 15, 7, 9, 11, 13, 8].map(Math.round);
    const cpcStrip = [3, 2, 1, 4, 0, -1, 2, 3, 1, 0, -2, 1, 2, 0, -1, 1, 0, 3, 2, 1, 4, 0, -1, 2, 3, 1].map(Math.round);
    deviationAlarmChart.setOption({
        title: [
            { text: '纠偏报警信息', left: 10, top: 10, textStyle: { color: '#fff', fontSize: 14 } },
            { text: '液压缸(mm)', left: 110, top: 10, textStyle: { color: '#4ea6e6', fontSize: 12 } },
            { text: '带钢(mm)', left: 210, top: 10, textStyle: { color: '#ffd84a', fontSize: 12 } }
        ],
        tooltip: {},
        legend: {
            data: ['液压缸(mm)', '带钢(mm)'],
            right: 30,
            top: 10,
            textStyle: { color: '#fff', fontSize: 12 }
        },
        grid: { left: 40, right: 40, top: 40, bottom: 30 },
        xAxis: {
            type: 'category',
            data: cpcLabels,
            axisLabel: { color: '#fff', fontSize: 12 }
        },
        yAxis: {
            type: 'value',
            min: -100,
            max: 100,
            axisLabel: { color: '#fff', fontSize: 12 },
            splitLine: { lineStyle: { color: '#444' } }
        },
        series: [
            {
                name: '液压缸(mm)',
                type: 'bar',
                data: cpcHydraulic,
                barWidth: 14,
                itemStyle: { color: '#4ea6e6' },
                barGap: '0%',
                barCategoryGap: '0%'
            },
            {
                name: '带钢(mm)',
                type: 'bar',
                data: cpcStrip,
                barWidth: 14,
                itemStyle: { color: '#ffd84a' },
                barGap: '0%',
                barCategoryGap: '0%'
            }
        ]
    });
});

onUnmounted(() => {
    if (intervalId) {
        clearInterval(intervalId);
    }
});

watch(apiData, (newTagData) => {
    if (!newTagData || Object.keys(newTagData).length === 0) {
        return;
    }
    // Update speeds, CPC width, coil lengths from newTagData, mapping from NewFulllineTrack.vue
    // Template: middle_speed1 (入口段) -> entSpeed
    // Template: middle_speed2 (光整段) -> spmSpeed
    // Template: middle_speed4 (工艺段) -> lineSpeed

    // Recalculate looper fill/empty times based on latest speeds and looper values
    // Looper values are also in itemtag (G10_303NI: 入口, G10_305NI: 中间, G10_307NI: 出口)
    inletLooper.value = parseFloat(String(newTagData['G10_303NI'] || '0'));
    middleLooper.value = parseFloat(String(newTagData['G10_305NI'] || '0'));
    exportLooper.value = parseFloat(String(newTagData['G10_307NI'] || '0'));

    inletLooperTime.value = sleeveDeclineTime(technologicalName, 'entrance', Number(parseFloat(newTagData['G1_1803NI']).toFixed(0)), Math.round(trackData.value.speed), inletLooper.value / 100);
    middleLooperTime.value = sleeveDeclineTime(technologicalName, 'middle', Math.round(trackData.value.speed), Number(parseFloat(newTagData['G1_1801NI']).toFixed(0)), middleLooper.value / 100);
    exportLooperTime.value = sleeveDeclineTime(technologicalName, 'exit', Number(parseFloat(newTagData['G1_1801NI']).toFixed(0)), Number(parseFloat(newTagData['G1_1800NI']).toFixed(0)), exportLooper.value / 100);
    cpc4Width.value = parseFloat(String(newTagData['G17_405NI'] || '0'));
    extSpeed.value = Number(parseFloat(newTagData['G1_1800NI']).toFixed(0))
    cenSpeed.value = Number(parseFloat(newTagData['G1_1802NI']).toFixed(0))
    entSpeed.value = Number(parseFloat(newTagData['G1_1803NI']).toFixed(0))
    spmSpeed.value = Number(parseFloat(newTagData['G1_1801NI']).toFixed(0))

    coiler_remaining_length_a.value = parseFloat(String(newTagData['G201_529NI'] || '0'));
    coiler_remaining_length_b.value = parseFloat(String(newTagData['G201_536NI'] || '0'));
    uncoiler_remaining_length_a.value = parseFloat(String(newTagData['G414_448NI'] || '0'));
    uncoiler_remaining_length_b.value = parseFloat(String(newTagData['G414_457NI'] || '0'));

    // Refresh ECharts gauges
    if (document.getElementById("middle_speed1")) initScoreChart("middle_speed1", entSpeed.value);
    if (document.getElementById("middle_speed2")) initScoreChart("middle_speed2", spmSpeed.value);
    if (document.getElementById("middle_speed4")) initScoreChart("middle_speed4", cenSpeed.value); // Mapped to cenSpeed (G1_1802NI)

    const cpcHydraulicKeys = [
        'G104_402NI', 'G104_404NI', 'G104_406NI', 'G104_408NI', 'G104_410NI', 'G104_412NI', 'G104_431NI', 'G104_414NI',
        'G104_416NI', 'G104_417NI', 'G104_419NI', 'G104_420NI', 'G104_422NI', 'G104_423NI', 'G104_425NI', 'G104_426NI',
        'G104_428NI', 'G104_429NI', 'G105_402NI', 'G105_403NI', 'G105_405NI', 'G105_406NI', 'G105_408NI', 'G105_409NI',
        'G105_411NI', 'G105_432NI'
    ];
    const cpcStripKeys = [
        'G104_401NI', 'G104_403NI', 'G104_405NI', 'G104_407NI', 'G104_409NI', 'G104_411NI', 'G104_430NI', 'G104_413NI',
        'G104_415NI', 'G104_418NI', 'G104_421NI', 'G104_424NI', 'G104_427NI', 'G105_401NI', 'G105_404NI', 'G105_407NI',
        'G105_410NI', 'G105_412NI', 'G105_414NI', 'G105_416NI', 'G105_418NI', 'G105_420NI', 'G105_422NI', 'G105_424NI',
        'G105_426NI', 'G105_426NI'
    ];
    const cpcHydraulic = cpcHydraulicKeys.map(key => Math.round(Number(newTagData[key] || 0)));
    const cpcStrip = cpcStripKeys.map(key => Math.round(Number(newTagData[key] || 0)));

    if (document.getElementById('deviationAlarmChart')) {
        const deviationDom = document.getElementById('deviationAlarmChart');
        if (deviationDom) {
            const deviationAlarmChart = echarts.getInstanceByDom(deviationDom);
            if (deviationAlarmChart) {
                deviationAlarmChart.setOption({
                    series: [
                        { data: cpcHydraulic },
                        { data: cpcStrip }
                    ]
                });
            }
        }
    }

    const tensionSetKeys = [
        'G102_433NI', 'G102_438NI', 'G102_443NI', 'G102_448NI', 'G102_453NI', 'G102_458NI', 'G102_463NI', 'G102_468NI', 'G102_473NI', 'G102_478NI'
    ];
    const tensionRealKeys = [
        'G102_434NI', 'G102_439NI', 'G102_444NI', 'G102_449NI', 'G102_454NI', 'G102_459NI', 'G102_464NI', 'G102_469NI', 'G102_474NI', 'G102_479NI'
    ];
    const tensionSet = tensionSetKeys.map(key => parseFloat(Number(newTagData[key] || 0).toFixed(2)));
    const tensionReal = tensionRealKeys.map(key => parseFloat(Number(newTagData[key] || 0).toFixed(2)));
    const tensionAll = tensionSet.concat(tensionReal);
    let tensionMax = Math.ceil(Math.max(...tensionAll) * 1.2);
    let tensionMin = Math.floor(Math.min(...tensionAll) * 1.2);
    if (document.getElementById('furnaceTensionChart')) {
        const furnaceDom = document.getElementById('furnaceTensionChart');
        if (furnaceDom) {
            const furnaceTensionChart = echarts.getInstanceByDom(furnaceDom);
            if (furnaceTensionChart) {
                furnaceTensionChart.setOption({
                    yAxis: { min: tensionMin, max: tensionMax },
                    series: [
                        { data: tensionSet },
                        { data: tensionReal }
                    ]
                });
            }
        }
    }
}, { deep: true });

// 初始化仪表盘
const initScoreChart = (chartId: string, value: number) => {
    let speedChart = echarts.getInstanceByDom(document.getElementById(chartId) as HTMLElement)
    if (!speedChart) {
        speedChart = echarts.init(document.getElementById(chartId) as HTMLElement);
    }
    const baseOption = SpeedBaseOption[chartId]
    let option = {
        series: [
            {
                type: 'gauge',
                center: ["50%", "50%"],
                radius: '80%',
                startAngle: 225,
                endAngle: -45,
                max: baseOption.max,
                axisLine: {
                    roundCap: true,
                    lineStyle: {
                        width: 7,
                        color: [
                            [1, new echarts.graphic.LinearGradient(0, 1, 0.9, 1, [
                                {
                                    offset: 0,
                                    color: "#D64444"
                                },
                                {
                                    offset: 0.2,
                                    color: "#D86E6D"
                                },
                                {
                                    offset: 0.5,
                                    color: "#F1F3F4"
                                },
                                {
                                    offset: 0.65,
                                    color: "#F1F3F4"
                                },
                                {
                                    offset: 0.8,
                                    color: "#79ACF6"
                                },
                                {
                                    offset: 1,
                                    color: "#1976FD"
                                }
                            ])
                            ]
                        ]
                    }
                },
                pointer: {
                    // icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                    length: '90%',
                    width: 2,
                    // offsetCenter: [0, '-60%'],
                    // itemStyle: {
                    //     color: 'FFFFFF'
                    // }
                    // shadowColor : '#000',
                    color: 'FFFFFF'
                },
                axisTick: {
                    distance: -14,
                    length: 2,
                    lineStyle: {
                        color: '#4B83F7',
                        width: 2
                    }
                },
                splitLine: {
                    distance: -16,
                    length: 6,
                    lineStyle: {
                        color: '#4B83F7',
                        width: 2
                    }
                },
                axisLabel: {
                    color: '#FFF',
                    fontSize: 14,
                    distance: -30,
                    rotate: 'tangential',
                    formatter: function (value: any) {
                        if (value === 0) {
                            return '';
                        } else if (value === baseOption.segmentation1) {
                            return '';
                        } else if (value === baseOption.segmentation2) {
                            return '';
                        } else if (value === baseOption.max) {
                            return '';
                        }
                        return '';
                    }
                },
                title: {
                    offsetCenter: [0, '70%'],
                    fontSize: 12,
                    color: '#FFF',
                },
                detail: {
                    fontSize: 18,
                    offsetCenter: [0, '30%'],
                    valueAnimation: true,
                    formatter: function (value: any) {
                        return Math.round(value); // 只显示整数
                    },
                    color: '#FFF'
                },
                data: [
                    {
                        value: value,
                        name: 'mpm'
                    }
                ]
            }
        ]
    };
    speedChart.setOption(option);
}
const footTable = ref<any[]>([]);

// 新增弹窗控制和选中卷号
const showShapeDialog = ref(false);
const selectedCoilId = ref('');

// 板形仪通道号(长度序列)数据
const plateCurveData = ref<any>([]);

// === 复制PlanRollDeviationPrediction.vue的findAll4和echart_test7 ===
async function findAll4(extid: any, row: any) {
  let params = [
    'tcm_shape_channe_0', 'tcm_shape_channe_1', 'tcm_shape_channe_2', 'tcm_shape_channe_3',
    'tcm_shape_channe_4', 'tcm_shape_channe_5', 'tcm_shape_channe_6', 'tcm_shape_channe_7',
    'tcm_shape_channe_8', 'tcm_shape_channe_9', 'tcm_shape_channe_10', 'tcm_shape_channe_11',
    'tcm_shape_channe_12', 'tcm_shape_channe_13', 'tcm_shape_channe_14', 'tcm_shape_channe_15',
    'tcm_shape_channe_16', 'tcm_shape_channe_17', 'tcm_shape_channe_18', 'tcm_shape_channe_19',
    'tcm_shape_channe_20', 'tcm_shape_channe_21', 'tcm_shape_channe_22', 'tcm_shape_channe_23',
    'tcm_shape_channe_24', 'tcm_shape_channe_25', 'tcm_shape_channe_26', 'tcm_shape_channe_27',
    'tcm_shape_channe_28', 'tcm_shape_channe_29', 'tcm_shape_channe_30', 'tcm_shape_channe_31',
    'tcm_shape_channe_32', 'tcm_shape_channe_33', 'tcm_shape_channe_34', 'tcm_shape_channe_35',
    'tcm_shape_channe_36', 'tcm_shape_channe_37', 'tcm_shape_channe_38', 'tcm_shape_channe_39',
    'tcm_shape_channe_40', 'tcm_shape_channe_41', 'tcm_shape_channe_42', 'tcm_shape_channe_43',
    'tcm_shape_channe_44', 'tcm_shape_channe_45', 'tcm_shape_channe_46', 'tcm_shape_channe_47',
    'tcm_shape_channe_48', 'tcm_shape_channe_49', 'tcm_shape_channe_50', 'tcm_shape_channe_51',
    'tcm_shape_channe_52', 'tcm_shape_channe_53', 'tcm_shape_channe_54', 'tcm_shape_channe_55',
    'tcm_shape_channe_56', 'tcm_shape_channe_57', 'tcm_shape_channe_58', 'tcm_shape_channe_59',
    'tcm_shape_channe_60', 'tcm_shape_channe_61', 'tcm_shape_channe_62', 'tcm_shape_channe_63',
    'tcm_s5_strip_speed_act'
  ];
  const graphParam = {
    line: 'TCM2280',
    extid: [extid],
    curve: params,
  };
  const response = await historyApi.getgraphData(graphParam);
  if (response.data.data.curve[0]) {
    echart_test7([response.data.data.curve[0]]);
  } else {
    echart_test7(null);
  }
}

function echart_test7(datas10: any) {
  let fakeArr = Array.from({ length: 20 }, (_, i) => Array.from({ length: 64 }, () => Math.random() * 10 - 5))
  let dataObj = datas10 && datas10[0] && Object.keys(datas10[0]).length > 0 ? datas10[0] : null
  let res: any[] = []
  let max = 0
  let need_x11: number[] = []
  if (dataObj) {
    Object.entries(dataObj).forEach(([key, value]) => {
      const macthReq = /tcm_shape_channe_(\d+)$/.exec(key)
      if (!macthReq || (Array.isArray(value) && value.every((i: any) => i === 0))) return
      const index = Number(macthReq[1])
      max = Math.max(max, index)
      if (Array.isArray(value)) {
        value.forEach((v: any, i: any) => {
          res.push([i, index, v])
          if (need_x11.length < value.length) {
            need_x11.push(i + 1)
          }
        })
      }
    })
  } else {
    // 用假数据
    for (let ch = 0; ch < 64; ch++) {
      for (let i = 0; i < 20; i++) {
        res.push([i, ch, fakeArr[i][ch]])
      }
    }
    need_x11 = Array.from({ length: 20 }, (_, i) => i + 1)
    max = 63
  }
  let days = Array.from({ length: 64 }, (_, i) => `c_${i}`)
  let listMxsMin = days.length - max
  let a1: any = []
  for (let i = 0; i < listMxsMin; i++) {
    a1.push('0.00')
  }
  const myChart = echarts.init(document.getElementById('shape-curve-echart'))
  const option = {
    backgroundColor: '#263451',
    title: {
      text: '板形仪通道号(长度序列)' + (selectedCoilId.value || ''),
      textStyle: {
        color: '#fff', fontStyle: 'normal', fontWeight: 'bold', fontFamily: 'sans-serif', fontSize: 16
      }
    },
    tooltip: {
      backgroundColor: '#fff',
      borderColor: '#2979ff',
      borderWidth: 1,
      textStyle: {
        color: '#222',
        fontSize: 14
      },
      extraCssText: 'box-shadow:0 0 8px #2979ff88;border-radius:6px;'
    },
    grid: { left: '3%', right: '6%', containLabel: true },
    xAxis: {
      axisLine: { lineStyle: { color: '#fff', width: 1 } },
      name: '(m)', nameTextStyle: { fontSize: 14, color: '#fff' }, type: 'category', data: need_x11,
      axisLabel: { color: '#fff', fontSize: 14 },
      splitLine: { show: true, lineStyle: { type: 'dotted', color: '#ccc' } }
    },
    yAxis: {
      axisLine: { lineStyle: { color: '#fff', width: 1 } },
      nameTextStyle: { fontSize: 12, color: '#fff' }, type: 'category', data: days,
      axisLabel: { color: '#fff', fontSize: 14 },
      splitLine: { show: true, lineStyle: { type: 'dotted', color: '#ccc' } }
    },
    legend: { left: 'center', textStyle: { fontSize: 16, color: '#fff' } },
    visualMap: {
      min: -25, max: 25, calculable: true, orient: 'vertical', left: 'right', top: 'center', realtime: false,
      textStyle: { color: '#fff', fontSize: 14 },
      inRange: { color: [
        'RGB(0,10,255)', 'RGB(0,150,255)', 'RGB(0,199,255)', '#11fff9', 'RGB(0,255,0)', '#FFF500',
        'RGB(255,230,0)', 'RGB(249, 102, 72)', 'RGB(255,0,0)'] }
    },
    series: [
      { pointSize: 10, type: 'heatmap', data: res.sort((a: any, b: any) => a[0] - b[0]) }
    ]
  }
  myChart.clear()
  myChart.setOption(option, true)
}
// === End of copied functions ===

// 替换点击表格行事件，直接调用findAll4
const handleCoilRowClick = (row: any) => {
  selectedCoilId.value = row.entId;
  showShapeDialog.value = true;
  findAll4(row.entId, row);
};

// 移除fetchShapeCurve和renderShapeEchart相关代码
</script>
<style scoped lang="less">
.home {
    width: 100vw;
    background: url(/@/assets/images/home/body-bg.jpg) no-repeat;

    .home-main {
        height: 100%;

        .top {
            width: 100%;

        }

        .middle {
            width: 100%;

            .svg {
                width: 100%;
                height: 100%;

                svg {
                    width: 100%;
                }
            }
        }

        .footer {
            width: 100%;
            height: 240px;
        }
    }
}

.header {
    height: 10vh;
    background-image: url(/src/assets/img/head-bg.png);
    background-size: 100% 100%;

}

.warn {
    color: #fff;
    width: 30vw;
    height: 3.5vh;
    padding-left: 3vw;
}

.top-middle {
    display: flex;
    width: 48vw;
    margin-left: 1%;
    margin-top: 5px;

    :deep(.el-table-column) {
        &:nth-child(1) {
            width: 20% !important;
        }

        &:nth-child(n + 2) {
            width: 16% !important;
        }
    }
}

.msg-title {
    background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2vh;
    font-weight: bolder;
    width: 11vw;
    padding-top: 8px;
    padding-left: 1.8vw;

}

.information {
    color: #fff;
    width: 20vw;
    height: 4vh;
    border: 2px solid #3981d9;
    border-radius: 5px;
    padding-top: 3px;
    overflow: auto;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;

}

.information span {
    display: inline-block;
    /*inline样式不能使用动画*/
    animation: scroll 10s linear infinite;
    /*滚动动画*/
}

@keyframes scroll {
    from {
        transform: translateX(150px);
        /*div多宽就写多宽*/
    }

    to {
        transform: translateX(-100%);
    }
}

.middle {
    height: 30vh;
    width: 100%;
}

.svg {
    margin-top: 4.5vh;
    height: 100%;
    width: 100%;
}

.svg svg {
    height: 100%;
    width: 100%;
}

.bad_information {
    position: absolute;
    width: 17vw;
    height: 12vh;
    left: 82.5vw;
    top: -5.5vh;
    z-index: 9999;
}

.inlet_looper {
    position: absolute;
    left: 16.5vw;
    top: 9.7vh;
    width: 5vw;
    font-size: 8px;

}

.inlet_looper_time {
    position: absolute;
    left: 16.5vw;
    top: 7.1vh;
    width: 5vw;
    font-size: 8px;
    line-height: 12px;

}

p {
    margin-bottom: 0;
}

/** >looper */
.semitransp_box {
    border-radius: 4px;
    background: #063E90;
    width: fit-content;
    font-weight: 600;
    text-align: center;
    align-content: center;
    color: #fff;
    font-size: 8px;
    padding: 2px 4px;
    /* Added some padding */
}

.cpc4_semitransp_box {
    border-radius: 4px;
    background: red;
    /* Default, consider dynamic based on alarm */
    width: fit-content;
    font-weight: 600;
    text-align: center;
    align-content: center;
    color: #fff;
    font-size: 8px;
    padding: 2px 4px;
    /* Added some padding */
}

.cpc4_width {
    position: absolute;
    left: 77vw;
    top: 34vh;
    width: auto;
    /* Adjust to fit content */
    min-width: 7vw;
    /* Ensure minimum width if needed */
    font-size: 8px;
}

.middle_looper {
    position: absolute;
    left: 30.6vw;
    top: 10.7vh;
    width: 4.7vw;
    font-size: 8px;
}

.entZincPot {
    position: absolute;
    left: 59.5vw;
    top: 28vh;
    width: 4.5vw;
    font-size: 8px;
}

.zincPotGa {
    position: absolute;
    left: 64.5vw;
    top: 26.5vh;
    width: 5vw;
    font-size: 8px;
}

.zincPotGi {
    position: absolute;
    left: 64.5vw;
    top: 29.5vh;
    width: 5vw;
    font-size: 8px;
}

.AlFeBox {
    background-color: #063E90;
    border-radius: 10px;
    color: white;
    position: absolute;
    left: 65.1vw;
    top: 12vh;
    padding: 0 .3rem;
    font-size: 8px;
}

.middle_looper_time {
    position: absolute;
    left: 30.6vw;
    top: 8.5vh;
    width: 4.7vw;
    font-size: 8px;
}

.export_looper {
    position: absolute;
    left: 72vw;
    top: 10.6vh;
    width: 4.7vw;
    font-size: 8px;
}

.export_looper_time {
    position: absolute;
    left: 72vw;
    top: 8.5vh;
    width: 4.7vw;
    font-size: 8px;
}


.uncoiler_remaining_length_a {

    position: absolute;
    left: 6.5vw;
    top: 2vh;
    padding-left: 0.5vw;
    text-align: left;
    width: auto;
    /* Adjust to fit content */
    min-width: 4vw;
    font-size: 8px;
}


.uncoiler_remaining_length_b {

    position: absolute;
    left: 6.5vw;
    top: 5vh;
    padding-left: 0.5vw;
    text-align: left;
    width: auto;
    /* Adjust to fit content */
    min-width: 4vw;
    font-size: 8px;
}

.coiler_remaining_length_a {
    position: absolute;
    left: 88vw;
    top: 17vh;
    padding-left: 0.5vw;
    text-align: left;
    width: auto;
    /* Adjust to fit content */
    min-width: 6vw;
    font-size: 8px;
}

.coiler_remaining_length_b {
    position: absolute;
    left: 88vw;
    top: 20vh;
    padding-left: 0.5vw;
    text-align: left;
    width: auto;
    /* Adjust to fit content */
    min-width: 6vw;
    font-size: 8px;
}

.yield-strength {
    padding: 0 1rem;
    position: absolute;
    left: 64vw;
    top: 8vh;
    font-size: 8px;
    height: 14px;
    align-content: center
}

.statistics_info {
    position: absolute;
    left: 80vw;
    top: 8.3vh;
    /* background-color: red; */
    z-index: 900;
    width: 26%;
    height: 27%;
}

/**>middle_monitor */
.middle_monitor {
    width: 35vw;
    height: 9vh;
    position: absolute;
    left: 17.5vw;
    top: -3vh;
    /* background-color: red; */
    z-index: 888;
    border: #3981D9;
    border-style: solid;
    border-width: 2px;
}

/** >echart */
#middle_speed1 {
    position: absolute;
    left: -8vw;
    top: 7vh;
    /* background-color: red; */
    z-index: 889;
    width: 30%;
    height: 35%;
}

#middle_speed2 {
    position: absolute;
    left: 47vw;
    top: 7vh;
    /* background-color: red; */
    z-index: 890;
    width: 30%;
    height: 35%;
}

#middle_speed3 {
    position: absolute;
    left: 69vw;
    top: 7vh;
    /* background-color: red; */
    z-index: 891;
    width: 30%;
    height: 35%;
}

#middle_speed4 {
    position: absolute;
    left: 6.5vw;
    top: 7vh;
    /* background-color: red; */
    z-index: 892;
    width: 30%;
    height: 35%;
}

.foot-lineChart {
    width: 100%;
    height: 248px;
    margin-top: 2.5%;
    display: flex;
    align-items: stretch;
}
.chart-box {
    width: 100%;
    height: 248px;
    background: transparent;
}

.common_table .el-table {
    --el-table-row-hover-bg-color: unset;
    flex: 1;
    // /* 填充剩余空间 */
    // display: flex;
    // flex-direction: column;
}

:deep(.common_table .el-table__row:nth-child(odd)) {
    background-color: #223671;
}

::v-deep .el-table,
.el-table__expanded-cell {
    // margin-left: 5px !important;
    background-color: transparent !important;
}

::v-deep .el-table tr {
    background-color: transparent !important;
}

::v-deep .el-table tbody {
    background-color: transparent !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td {
    color: rgba(255, 255, 255, 0.7);
}

::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
    background-color: transparent !important;
    border: none !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td {
    padding-top: 4px;
    padding-bottom: 4px;
}

:deep(.el-table tr) {
    background-color: #162556;
}

:deep(.el-table__inner-wrapper::before) {
    background-color: #173d91;
}

:deep(.el-table .cell) {
    line-height: 17px
}



.irregular-card {
    position: relative;
    width: 100%;
    height: 110px;
    margin-top: 35px;
    background-image: -webkit-linear-gradient(left, #016B9B, #03DAFB);
    // background-image: linear-gradient(135deg, #ff7c7c, #ffeb3b, #26c6da, #7e57c2);
    //点的位置1 2 4 6 8 10 9 7 5 3
    clip-path: polygon(0% 20%, 0% 80%, 25% 100%, 50% 80%, 75% 80%, 100% 80%, 100% 20%, 75% 20%, 50% 20%, 25% 40%);
    animation: flow 1s ease infinite;
    z-index: 1;
}

@keyframes flow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.pillar {
    position: absolute;
    top: 58px;
    right: 1335px;
    /* 根据需要调整位置 */
    width: 10px;
    /* 柱子的宽度 */
    height: 105px;
    /* 柱子的高度 */
    background-image: url(/src/assets/images/pillar.png);
}


.pillar1 {
    position: absolute;
    top: 40px;
    right: 1141px;
    /* 根据需要调整位置 */
    width: 10px;
    /* 柱子的宽度 */
    height: 105px;
    /* 柱子的高度 */
    background-image: url(/src/assets/images/pillar.png);
}

.pillar2 {
    position: absolute;
    top: 40px;
    right: 951px;
    /* 根据需要调整位置 */
    width: 10px;
    /* 柱子的宽度 */
    height: 105px;
    /* 柱子的高度 */
    background-image: url(/src/assets/images/pillar.png);
}

.pillar3 {
    position: absolute;
    top: 40px;
    right: 526px;
    /* 根据需要调整位置 */
    width: 10px;
    /* 柱子的宽度 */
    height: 105px;
    /* 柱子的高度 */
    background-image: url(/src/assets/images/pillar.png);
}

.pillar4 {
    position: absolute;
    top: 40px;
    right: 341px;
    /* 根据需要调整位置 */
    width: 10px;
    /* 柱子的宽度 */
    height: 105px;
    /* 柱子的高度 */
    background-image: url(/src/assets/images/pillar.png);
}

.pillar5 {
    position: absolute;
    top: 40px;
    right: 174px;
    /* 根据需要调整位置 */
    width: 10px;
    /* 柱子的宽度 */
    height: 105px;
    /* 柱子的高度 */
    background-image: url(/src/assets/images/pillar.png);
}

.irregular-card1 {
    position: relative;
    width: 100%;
    height: 110px;
    margin-top: 35px;
    background-image: -webkit-linear-gradient(left, #FCC68F, #FE7B12);
    //点的位置1 2 4 6 8 10 9 7 5 3
    clip-path: polygon(0% 20%, 0% 80%, 25% 80%, 50% 80%, 75% 80%, 100% 80%, 100% 20%, 75% 20%, 50% 20%, 25% 20%);
    z-index: 1;
}
:deep(.blue-dialog) {
  background: linear-gradient(135deg, #22345a 60%, #2a5caa 100%) !important;
  border-radius: 16px;
  box-shadow: 0 0 32px 4px #2979ff99, 0 0 0 2px #1a3c7c inset;
  border: none !important;
  padding: 0;
}
:deep(.blue-dialog .el-dialog__header) {
  background: transparent !important;
  color: #fff !important;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  text-shadow: 0 0 8px #2979ff, 0 0 2px #fff;
  font-size: 20px;
  letter-spacing: 1px;
}
:deep(.blue-dialog .el-dialog__title) {
  color: #fff !important;
  background: linear-gradient(90deg, #00eaff 0%, #2979ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 8px #2979ff, 0 0 2px #fff;
}
:deep(.blue-dialog .el-dialog__body) {
  background: transparent !important;
  color: #fff !important;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 0 0 24px 0 #2979ff33 inset;
}
.blue-dialog-content {
  background: transparent !important;
  color: #fff !important;
  padding: 0 0 10px 0;
}
.blue-echart-bg {
  width: 100%;
  height: 480px;
  background: transparent !important;
}
:deep(.el-overlay-dialog),
:deep(.el-dialog__wrapper) {
  background: transparent !important;
  box-shadow: none !important;
}

:deep(.el-dialog) {
  background: rgba(34, 52, 90, 0.92) !important;
  border-radius: 20px !important;
  box-shadow: 0 0 40px 12px #00eaff88, 0 0 0 2px #2979ff inset !important;
  border: none !important;
  padding: 0 !important;
  backdrop-filter: blur(8px);
  outline: none !important;
}

:deep(.el-dialog__header) {
  background: transparent !important;
  color: #fff !important;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  text-shadow: 0 0 12px #00eaff, 0 0 2px #fff;
  font-size: 22px;
  letter-spacing: 1px;
  border-bottom: none !important;
}

:deep(.el-dialog__title) {
  color: #fff !important;
  background: linear-gradient(90deg, #00eaff 0%, #2979ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px #00eaff, 0 0 2px #fff;
}

:deep(.el-dialog__body) {
  background: transparent !important;
  color: #fff !important;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 0 0 32px 0 #2979ff33 inset;
  padding: 24px 32px 32px 32px !important;
}

.custom-dialog-overlay {
  position: fixed;
  z-index: 3000;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(10, 20, 40, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s;
}

.custom-dialog-content {
  min-width: 1600px;
  max-width: 90vw;
  min-height: 520px;
  background: rgba(34, 52, 90, 0.95);
  border-radius: 22px;
  box-shadow: 0 0 48px 12px #00eaff99, 0 0 0 2px #2979ff inset;
  padding: 0;
  overflow: hidden;
  position: relative;
  animation: dialogPop 0.3s;
  border: none;
}

.custom-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px 0 32px;
  font-size: 22px;
  color: #fff;
  font-weight: bold;
  background: transparent;
  text-shadow: 0 0 12px #00eaff, 0 0 2px #fff;
  letter-spacing: 1px;
  user-select: none;
}

.custom-dialog-close {
  font-size: 32px;
  color: #00eaff;
  cursor: pointer;
  margin-left: 24px;
  transition: color 0.2s;
  font-weight: bold;
}
.custom-dialog-close:hover {
  color: #fff;
  text-shadow: 0 0 8px #00eaff;
}

.custom-dialog-body {
  padding: 0 32px 32px 32px;
  color: #fff;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-echart-bg {
  width: 100%;
  height: 480px;
  background: transparent;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes dialogPop {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
</style>